<!-- author: xuett -->
<!-- date: 2024-08-01 10:27:20 -->
<!-- description: 提示词 -->
<template>
  <div class="edit-word" contenteditable="false">
    <svg class="word-arrow" aria-hidden="true">
      <use xlink:href="#icon-arrowLeft" fill="#54dcad" />
    </svg>
    {{ activeWord.title }}
  </div>
</template>

<script setup>
defineProps({
  activeWord: {
    type: Object,
    default: () => ({})
  }
});
</script>

<style scoped lang="scss">
.edit-word {
  padding: 0 14px 0 5px;
  height: 28px;
  background: #f6fffc;
  border-radius: 6px;
  border: 1px solid #54dcad;
  font-family: Alibaba PuHuiTi-Medium;
  font-size: 14px;
  color: #54dcad;
  line-height: 26px;
  display: inline-block;
  cursor: pointer;
  margin-right: 8px;
  .word-arrow {
    width: 12px;
    height: 12px;
  }
}
</style>
